<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        html,
        body {
            font-size: 16px;
            font-family: Microsoft YaHei, Arial, sans-serif;
        }

        .card {
            color: #666666;
            text-align: center;
            position: relative;
            padding: 80px 32px 20px 32px;
            border-radius: 0.5rem;
            background-color: #fff;
            border: 0.0625rem solid #CBD4E6;
            box-shadow: 0 0.125rem 0.125rem rgba(28, 5, 77, 0.05), 0 0.75rem 0.5rem rgba(0, 0, 0, 0.02);
            width: 100%;
            max-width: 560px;
            min-width: 560px;
            margin: 30px auto;
        }

        .el-avatar {
            font-size: .875rem;
            display: inline-block;
            text-align: center;
            overflow: hidden;
            color: #fff;
            background: #c0c4cc;
            line-height: 2.5rem;
            border-radius: 50%;
            width: 4.25rem !important;
            height: 4.25rem !important;
            background-color: #fff;
            border: .0625rem solid #e6e6e6;
        }

        .el-avatar>img {
            display: block;
            height: 100%;
            vertical-align: middle;
        }

        .text-grey-008 {
            color: #36374a !important;
        }

        .text-grey-008 {
            color: #36374a !important;
        }

        .lh-50 {
            line-height: 3.125rem !important;
        }

        .text-16 {
            font-size: 1rem !important;
        }

        .text-28 {
            font-size: 1.75rem !important;
        }

        .text-bold {
            font-weight: bold;
        }

        .text-light {
            font-weight: 400 !important;
        }

        .text-grey-005 {
            color: #657491 !important;
        }

        .text-14 {
            font-size: .875rem !important;
        }

        .lh-25 {
            line-height: 1.5625rem !important;
        }

        .text-grey-006 {
            color: #6e7491 !important;
        }

        .text-left {
            text-align: left;
        }

        .el-button {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            border: .0625rem solid #dcdfe6;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            margin: 0;
            font-weight: 500;
            font-size: .875rem;
            border-radius: .25rem;
            width: 8rem !important;
            padding: 1rem 1.25rem;
            transition: background-color .2s linear, border-color .2s linear;
            background-color: #3370ff;
            border-color: #3370ff;
            color: #fff;
            outline: 0;
        }

        .el-button:hover {
            background-color: #133c9a;
            border-color: #133c9a;
        }

        .text-grey-009 {
            color: #27273f !important;
        }

        .mt-8 {
            margin-top: .5rem !important;
        }

        .mr-8 {
            margin-right: .5rem !important;
        }

        .mx-8 {
            margin-left: .5rem !important;
            margin-right: .5rem !important;
        }
    </style>
</head>

<body>
    <div class="card">

        <div>
            <span class="w-68 h-68 el-avatar el-avatar--circle">
                <img src="{companyLogo}" style="object-fit: cover;">
            </span>
            <div class="text-grey-008 text-28 lh-50 text-bold">{companyShortName}</div>
            <div class="text-grey-005 text-16 lh-19 text-light mt-8">{companyName}</div>
            <div class="text-grey-005 text-16 lh-19 text-light mt-8">{companySlogan}</div>

            <div class="" style="height: 70px"></div>

            <div class="text-grey-006 text-14 lh-25 text-light">
                <span class="text-bold text-grey-009 mr-8">{companyShortName}</span>向您发送了一笔交易信息
            </div>
            <div class="text-grey-006 text-14 lh-25 text-light mt-8">点击查看您与<span class="text-bold text-grey-009 mx-8">{companyShortName}</span>之间的全部订单、交付、结算信息</div>

            <div class="" style="height: 50px"></div>

            <div class="mb-10">
                <a href="{shareLink}" target="_blank" class="el-button w-128 el-button--primary">
                    <span>查看全部</span>
                </a>
            </div>
            <div class="" style="height: 80px"></div>
        </div>

        <div class="text-grey-009 text-14 lh-25 text-light text-left">Powered by <span class="text-bold">WeLynk</span>
        </div>

    </div>
</body>

</html>
